<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-box" @tap="goSearch">
        <text class="icon">🔍</text>
        <text class="placeholder">搜索商品</text>
      </view>
    </view>
    
    <!-- 轮播图 -->
    <swiper class="banner" circular autoplay interval="3000" duration="500">
      <swiper-item v-for="(item, index) in bannerList" :key="index">
        <image class="banner-image" :src="item.image" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    
    <!-- 每日优选 -->
    <view class="daily-picks">
      <view class="section-title">
        <text class="title">每日优选</text>
        <text class="subtitle">精选新鲜好物</text>
      </view>
      <scroll-view class="picks-scroll" scroll-x>
        <view class="picks-list">
          <view class="picks-item" v-for="(item, index) in dailyPicks" :key="index" @tap="goDetail(item)">
            <image class="picks-image" :src="item.image" mode="aspectFill"></image>
            <text class="picks-name">{{item.name}}</text>
            <text class="picks-price">¥{{item.price}}</text>
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 商品推荐 -->
    <view class="recommend">
      <view class="section-title">
        <text class="title">商品推荐</text>
        <text class="subtitle">为你精选好物</text>
      </view>
      <view class="goods-grid">
        <view class="goods-item" v-for="(item, index) in recommendList" :key="index" @tap="goDetail(item)">
          <image class="goods-image" :src="item.image" mode="aspectFill"></image>
          <view class="goods-info">
            <text class="goods-name">{{item.name}}</text>
            <text class="goods-desc">{{item.desc}}</text>
            <view class="goods-price-box">
              <text class="goods-price">¥{{item.price}}</text>
              <text class="goods-unit">/{{item.unit}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图数据
      bannerList: [
        { image: 'https://github.com/githuixh/picx-images-hosting/raw/master/20250126/grape.pffxm4q5f.webp' },
        { image: 'https://github.com/githuixh/picx-images-hosting/raw/master/20250126/mango.7pe913ckr.webp' },
        { image: 'https://github.com/githuixh/picx-images-hosting/raw/master/20250126/fruit.3yeju9s7ry.webp' }
      ],
      // 每日优选数据
      dailyPicks: [
        { id: 1, name: '云南红提', price: '29.9', image: 'https://github.com/githuixh/picx-images-hosting/raw/master/20250126/grape.pffxm4q5f.webp' },
        { id: 2, name: '海南芒果', price: '39.9', image: 'https://github.com/githuixh/picx-images-hosting/raw/master/20250126/mango.7pe913ckr.webp' },
        { id: 3, name: '四川柑橘', price: '19.9', image: 'https://github.com/githuixh/picx-images-hosting/raw/master/20250126/orange.1029qrjyb5.webp' },
        { id: 4, name: '新疆哈密瓜', price: '49.9', image: 'https://github.com/githuixh/picx-images-hosting/raw/master/20250126/melon.8l06uyqrfx.webp' }
      ],
      // 商品推荐数据
      recommendList: [
        {
          id: 1,
          name: '智利进口车厘子',
          desc: '果肉饱满，甜度适中',
          price: '89.9',
          unit: '500g',
          image: 'https://github.com/githuixh/picx-images-hosting/raw/master/20250126/cherry.3nrq14czmd.webp'
        },
        {
          id: 2,
          name: '泰国椰青',
          desc: '椰香浓郁，清甜爽口',
          price: '19.9',
          unit: '个',
          image: 'https://github.com/githuixh/picx-images-hosting/raw/master/20250126/coconut.3nrq14czmh.webp'
        },
        {
          id: 3,
          name: '新西兰奇异果',
          desc: '果肉细腻，营养丰富',
          price: '39.9',
          unit: '6个',
          image: 'https://github.com/githuixh/picx-images-hosting/raw/master/20250126/kiwi.6ike6ws6ee.webp'
        },
        {
          id: 4,
          name: '陕西红富士',
          desc: '皮薄肉厚，清脆可口',
          price: '29.9',
          unit: '4个',
          image: 'https://github.com/githuixh/picx-images-hosting/raw/master/20250126/apple.5q7ip6bknn.webp'
        }
      ]
    }
  },
  methods: {
    // 跳转到搜索页
    goSearch() {
      uni.navigateTo({
        url: '/pages/search/index'
      })
    },
    
    // 跳转到商品详情
    goDetail(item) {
      uni.navigateTo({
        url: `/pages/goods/detail/index?id=${item.id}`
      })
    }
  }
}
</script>

<style>
.container {
  min-height: 100vh;
  background: #f8f8f8;
}

/* 搜索栏样式 */
.search-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #fff;
  padding: 20rpx 30rpx;
}

.search-box {
  height: 72rpx;
  background: #f5f5f5;
  border-radius: 36rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
}

.search-box .icon {
  font-size: 32rpx;
  margin-right: 10rpx;
}

.search-box .placeholder {
  font-size: 28rpx;
  color: #999;
}

/* 轮播图样式 */
.banner {
  margin-top: 112rpx;
  height: 300rpx;
  background: #fff;
}

.banner-image {
  width: 100%;
  height: 100%;
}

/* 每日优选样式 */
.daily-picks {
  margin-top: 20rpx;
  background: #fff;
  padding: 30rpx;
}

.section-title {
  display: flex;
  align-items: baseline;
  margin-bottom: 20rpx;
}

.section-title .title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}

.section-title .subtitle {
  font-size: 24rpx;
  color: #999;
  margin-left: 20rpx;
}

.picks-scroll {
  width: 100%;
}

.picks-list {
  display: flex;
  padding: 10rpx 0;
}

.picks-item {
  margin-right: 20rpx;
  width: 200rpx;
  flex-shrink: 0;
}

.picks-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
  margin-bottom: 10rpx;
}

.picks-name {
  font-size: 26rpx;
  color: #333;
  display: block;
}

.picks-price {
  font-size: 28rpx;
  color: #4caf50;
  font-weight: bold;
}

/* 商品推荐样式 */
.recommend {
  margin-top: 20rpx;
  background: #fff;
  padding: 30rpx;
}

.goods-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.goods-item {
  background: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.goods-image {
  width: 100%;
  height: 320rpx;
}

.goods-info {
  padding: 20rpx;
}

.goods-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 6rpx;
  display: block;
}

.goods-desc {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;
  display: block;
}

.goods-price-box {
  display: flex;
  align-items: baseline;
}

.goods-price {
  font-size: 32rpx;
  color: #4caf50;
  font-weight: bold;
}

.goods-unit {
  font-size: 24rpx;
  color: #999;
  margin-left: 4rpx;
}
</style>

